/*
 * @Author: 橘子
 * @Date: 2023-06-02 17:15
 * @Project_description: 模态框菜单(未完成)
 * @Description: 代码是我抄的，不会也是真的
 */
'use strict'
import yUploadImg from '@/components/y-upload-img/'

/**
 * @Description: 批量上传图片
 * @author 橘子
 * @date 2023-06-02
 */
export class UploadImageList {
  constructor() {
    this.title = '批量上传'
    // this.iconSvg = '<svg >...</svg>'
    this.tag = 'button'
    this.showModal = true
    this.modalWidth = '100%'
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return ''
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // Modal menu ，这个函数不用写，空着即可
  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor) {
    // JS 语法
    return null // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor) {
    const modal = document.createElement('div')
    modal.style.display = 'flex'
    modal.style.margin = '20px'
    modal.style.width = '500px'
    const uploadImg = new Vue({
      render: (h) =>
        h(yUploadImg, {
          props: {
            value: '',
            limit: 6,
          },
          on: {
            input: (val) => {
              //TODO:无解啊，不知怎么办
              console.log('为啥没插入内容', editor)

              editor.insertText('1111')
              editor.updateView()
            },
          },
        }),
    })
    modal.appendChild(uploadImg.$mount().$el)

    return modal
  }
}
